<template>
  <view class="news">
    <view v-if="newslist.length > 0">
      <view class="newslist" v-for="(item,index) in newslist" :key="index">
          <view class="time">{{ FormatterDate(item.CREATED) }}</view>
          <view class="news_detail">
              <view class="state">{{item.OSN_MESSAGECONTENT}}</view>
              <view class="data">委托单号：{{ item.OSN_NUM }}</view>
              <view class="data">{{item.Goods[0].NAME}}，{{item.Goods[0].GROSSWEIGHT}}kg，{{item.Goods[0].PACKAGENUM}}件，{{item.Goods[0].VOLUME}}m³</view>
              <view class="data">集装箱/{{item.OSN_BOXWAY}}，20GP*{{item.OSN_20GPCOUNT}}，40GP*{{item.OSN_40GPCOUNT}}，40HQ*{{item.OSN_40HQCOUNT}}</view>
              <view class="data">发运日期：{{ FormatterDate(item.OSN_SENDGOODSDATE).substring(0,10) }}</view>
              <view class="data">起始港站：{{item.OSN_STARTPORT}}</view>
              <view class="data">目的港站：{{item.OSN_ENDPORT}}</view>
          </view>
      </view>
    </view>
    <view class="empty-class" v-else>
        <image src="@/static/images/user/empty1.png" alt=""></image>
    </view>
  </view>
</template>

<script>
import { getnews, UpdateOrderSolutionNews } from "@/request/interface/logistics.js";
import { hasPermission, getItem } from "@/utils/storage.js"; // //引入混入的文件
import { data } from 'uview-ui/libs/mixin/mixin';
export default {
    data(){
        return {
            newslist:[],
            page:1,
            limit:10
        }
    },
    onLoad(){
        this.getnewslist()
        this.updateNews()
    },
    created() {
      hasPermission(); //路由鉴权
    },
    onReachBottom() {
      this.page = this.page + 1
      this.getnewslist()
    },
    methods:{
        // 获取消息列表
        async getnewslist(){
            const data = await getnews({
                useruuid: getItem("userdata").UUID,
                page: this.page,
                limit: this.limit
            })
            this.newslist = [...this.newslist, ...data.data]
        },
        // 查看消息是否查看
        async updateNews(){
            await UpdateOrderSolutionNews({
                useruuid: getItem("userdata").UUID
            })
        },
        FormatterDate(bir) {
            //判断是否为空
            if (bir == null)
                return "";
            //替换前面的字符
            bir = bir.replace("/Date(", "");
            //替换后面
            bir = bir.replace(")/", "");
            //转换为数字
            bir = parseInt(bir);
            //转换为日期格式
            var time = new Date(bir);
            return this.timeStampString(time.getTime());
            //return time.toLocaleDateString();
        },
        timeStampString(time) {
            var datetime = new Date();
            datetime.setTime(time);
            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
            var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        }
    }
}
</script>

<style lang="scss" scoped>
.news {
    width: 100%;
    background-color: #f2f8ff;
    min-height: 100vh;
    .newslist {
        margin-bottom: 40rpx;
        .time {
            // padding: 0 20rpx;
            width: 250rpx;
            height: 40rpx;
            background: #84ddff;
            border-radius: 20rpx;
            font-size: 20rpx;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
            line-height: 40rpx;
            margin: 0 auto;
        }
        .news_detail {
            width: 690rpx;
            opacity: 0.95;
            background: #ffffff;
            border-radius: 40rpx;
            box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(81,161,255,0.30); 
            border: 2rpx solid #333333;
            margin-left: 30rpx;
            margin-top: 20rpx;
			padding-bottom: 30rpx;
            .state {
                font-weight: 700;
                color: #333333;
                font-size: 28rpx;
                margin-left: 40rpx;
                margin-top: 30rpx;
                margin-bottom: 10rpx;
            }
            .data {
                font-weight: 400;
                color: #333333;
                font-size: 24rpx;
                margin-left: 40rpx;
                line-height: 40rpx;
            }

        }
    }
    .empty-class {
        width: 600rpx;
        margin: 0rpx auto;
        text-align: center;
        image {
        width: 520rpx;
        height: 666rpx;
        }
    }
}

</style>